<template>
  <div class="div-show-code">
    <!-- v-html只能渲染纯html，不能渲染自定义组件，这个怎么办？ -->
    <div class="div-show-code-demo" v-html="code"></div>
    <div class="div-show-code-code" v-text="code"></div>
    <div class="div-show-code-toolbar">
      <el-button type="text" v-if="!isHideCode">显示代码</el-button>
      <el-button type="text" v-else>隐藏代码</el-button>
      <el-button type="text">在线运行</el-button>
    </div>
  </div>
</template>
<script>
// import frameworkUtil from "@/framework/js/frameworkUtil.js";
import niupiBtn from "@/components/niupiBtn/niupiBtn.vue";
import Vue from 'vue'
export default {
  components: {
    'niupi-btn': niupiBtn,
  },
  props: {
    code: {
      type: String,
      required: true
    }
  },
  created () {
    console.log(Vue.compile)
  },
  data () {
    return {
      isHideCode: true, // 是否隐藏代码
    }
  },
  methods: {
    // click (e) {
    //   //触发父组件的click事件
    //   this.$emit('click', e)
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.niupi-btn {
  color: white;
}
</style>